#include("/view/include/front.html")
#@layout()

#define main()
<div class="layuimini-container">
    <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
		<legend>搜索信息</legend>
		<div style="margin: 10px 10px 10px 10px">
			<form class="layui-form layui-form-pane" action="" id="searchForm"	lay-filter="searchForm">
				<div class="layui-form-item"> 
			        <div class="layui-inline">
						<label class="layui-form-label">所属课程</label>
						<div class="layui-input-inline">
	        				<select name="course_id" id="courseId" url="#(CONTEXT)mooc/course/slist" #if(course_id) value="#(course_id)" #end lay-filter="courseId" lay-search></select>					
						</div>
					</div>       
					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-primary"
							lay-submit lay-filter="chart-search-btn">
							<i class="layui-icon"></i> 搜 索
						</button>
	      				<button type="reset" class="layui-btn layui-btn-primary">清空</button>
					</div>
				</div>
			</form>
		</div>
	</fieldset>
    	<div id="chartDiv" style="width: 100%;min-height:500px"></div>   
    </div>
</div>
#end

#define script()
<script>
    layui.use(['echarts','echartsTheme','echartsHelper','form', 'curd'], function () {
        var $ = layui.jquery,
        	echartsHelper = layui.echartsHelper,
        	form = layui.form,
        	curd = layui.curd,
            layuimini = layui.layuimini;
        var options = {
        		ele:'chartDiv',
            	title:'内容学习排行',
            	type:'line',
            	mult:false,
            	data:'#(CONTEXT)dev/dataset/data?id=6',
                style:{series:[{name:'内容学习排行'}]}
        };
        
        function initChart(param){
        	options.param = param;
        	echartsHelper.init(options);
        }
        curd.initForm('#searchForm');
        form.on('submit(chart-search-btn)', function (data) {
        	options.data = '#(CONTEXT)dev/dataset/data?id=6';
        	initChart(data.field);
            return false;
        });
        
        initChart({#if(course_id)course_id:#(course_id) #end});
    });      
</script>
#end